<template>
    <div class="citySelect">
        <el-autocomplete :value="inputValue" @input="changeInputValue" 
         @select="handleSelect" class="inline-input" :icon="inputIcon" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete>
    </div>
</template>

<script>
    import axios from 'axios'
    const cityListUrl = '/huodong/mis/transmit?url=%2F%3Fqt%3Dgetcitylist%26type%3D1';
    import cityList from './city.js'
    export default {
        name: 'citySelect',
        props: {
            inputIcon: {
                type: String,
                default: ''
            },
            inputRef: {
                type: String,
                default: ''
            },
            inputValueChange: {
                type: Function
            },
            selectValueChange: {
                type: Function
            }
        },
        watch: {
            inputRef: function() {
                this.commitState()
            },
            inputValue: function() {
                this.commitState()
            }
        },
        computed:{
            inputValue:function () {
                return ''
            }
        },
        methods: {
            commitState() {
                let data = {
                    ref: this.inputRef,
                    value: this.inputValue
                }
                // this.$store.commit('setFormData', data)
            },
            querySearch(queryString, cb) {
                var citys = this.citys;
                var results = queryString ? citys.filter(this.createFilter(queryString)) : citys;
                cb(results);
            },
            createFilter(queryString) {
                return (city) => {
                    return (city.value.indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleData(list) {
                let listArray =[];
                list.map(item => {
                    listArray.push({
                        value: item.city_name,
                        id: item.city_id
                    })
                })
                return listArray;
            },
            changeInputValue(value) {
                if(this.inputValueChange) {
                    this.inputValueChange(value);
                }
            },
            handleSelect(item) {
                if(this.selectValueChange) {
                    this.selectValueChange(item);
                }
            }
        },
        mounted() {
            axios.get(cityListUrl)
            .then(response => {
                this.citys = this.handleData(response.data);
            })
            .catch(error => {
                this.citys = this.handleData(cityList.data);
            });
        }
    }
</script>

<style scoped>
    .citySelect{
        margin-bottom: 20px;
    }
</style>
